<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Menu Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <nav>
        <ul class="navigation">
            <li>
                <a href="#home" title="Home">
                    Home
                    <svg xmlns="http://www.w3.org/2000/svg" class="chevron" width="24" height="24" viewBox="0 0 24 24"
                        stroke-width="2" stroke="white" fill="none" stroke-linecap="round" stroke-linejoin="round">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                        <path d="M9 6l6 6l-6 6"></path>
                    </svg>
                </a>

                <div class="subnavigation__wrapper">
                    <ul>
                        <li>
                            <a href="#services" title="Services">
                                Services
                            </a>
                        </li>
                        <li>
                            <a href="#portfolio" title="Portfolio">
                                Portfolio
                            </a>
                        </li>
                    </ul>
                </div>
            </li>
            <li>
                <a href="#blog" title="Blog">
                    Blog
                </a>
            </li>
            <li>
                <a href="#company" title="Company">
                    Company
                    <svg xmlns="http://www.w3.org/2000/svg" class="chevron" width="24" height="24" viewBox="0 0 24 24"
                        stroke-width="2" stroke="white" fill="none" stroke-linecap="round" stroke-linejoin="round">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                        <path d="M9 6l6 6l-6 6"></path>
                    </svg>
                </a>
                <div class="subnavigation__wrapper">
                    <ul>
                        <li>
                            <a href="#about" title="About">
                                <span class="link-inner">About</span>
                            </a>
                        </li>
                        <li>
                            <a href="#contact-us" title="Contact Us">
                                Contact Us
                            </a>
                        </li>
                        <li>
                            <a href="#contact-us">
                                Blog
                            </a>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
    </nav>
</body>

</html>